<template>
	<div class="container">
		<div class="container-main">
			<div class="container-content">
				<div>
					<span>我的积分&nbsp;&nbsp;</span>
					<span class="count">1999</span>
				</div>
				<div>
					<div @click="integralInfo">查看明细</div>
					<div @click="goExchange">兑换</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		},
		methods: {
			goExchange () {
				this.$router.push({
					name: 'my-exchange-index'
				})
			},
			integralInfo () {
				console.log('1')
				this.$router.push({
					name: 'integral-info-index'
				})
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	.container {
		padding: .3rem;
		background: #F6F6F6 !important;

		.container-main {
			width: 6.9rem;
			height: 2.48rem;
			background: url(../../assets/icon/my-icon/5b48ac31100b0.png) no-repeat;
			background-size: contain;

			.container-content {
				padding: .3rem;
				height: calc(100% - .6rem);
				display: flex;
				justify-content: space-between;

				div:first-child {
					display: flex;
					align-items: center;

					span:first-child {
						font-size: 18px;
						color: #FFFFFF;
					}

					.count {
						font-size: 36px;
						color: #FE9E2E;
					}
				}

				div:last-child {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					div {
						width: 2rem;
						height: .8rem;
						font-size: 14px;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					div:first-child {
						background-image: linear-gradient(-135deg, #5CC4FF 0%, #218BFB 100%);
						border-radius: 5px;
					}

					div:last-child {
						background-image: linear-gradient(-135deg, #FAD961 0%, #F76B1C 100%);
						border-radius: 5px;
					}
				}
			}
		}
	}
</style>
